 <template>
  <el-container>
    <el-main>
      <el-row class="table-wrapper">   
        <el-col :span='24'>  

        <el-form :inline="true" :model="priceCreateForm" class="demo-form-inline">
          <el-form-item label="商品">
            <el-select v-model="priceCreateForm.giftId" placeholder="请选择商品">
                <el-option
                        v-for="item in gifts"
                        :key="item.id"
                        :label="item.resourceDesc"
                        :value="item.id">
                        </el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="快递">
            <el-select v-model="priceCreateForm.kkTypeId" placeholder="请选择快递">
                <el-option
                        v-for="item in expresses"
                        :key="item.id"
                        :label="item.kkDesc"
                        :value="item.id">
                        </el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="等级">
            <el-select v-model="priceCreateForm.levelId" placeholder="请选择用户等级">
                <el-option
                        v-for="item in levels"
                        :key="item.id"
                        :label="item.levelDesc"
                        :value="item.id">
                        </el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="priceCreateForm.price" placeholder="价格"></el-input>
          </el-form-item>
          <el-form-item label="状态" v-show="false">
            <el-input v-model="priceCreateForm.status" placeholder="状态">ENABLE</el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">创建</el-button>
          </el-form-item>
        </el-form>
        </el-col>
      </el-row>

      <div class="table_container">
          <el-table
                v-loading="tableLoading"
                :data="priceList"
                style="width: 100%">
                <!-- <el-table-column 
                    type="index"
                    width="100">
                </el-table-column> -->
                <el-table-column 
                    label="分站" 
                    prop="namespace"
                    width="180">
                </el-table-column>
                <el-table-column 
                    label="礼品" 
                    width="180">
                  <template slot-scope="scope">
                    {{giftName(scope.row.giftId)}}
                  </template>
                </el-table-column>
                <el-table-column 
                  label="快递"
                  prop="kkDesc" 
                  width="180">
                </el-table-column>
                <el-table-column 
                  label="用户等级"
                  prop="levelDesc" 
                  width="180">
                </el-table-column>
                <el-table-column 
                  label="价格"
                  width="180">
                  <template slot-scope="scope">
                  <div v-if="scope.$index == editedRow">
                    <el-input v-model="price" placeholder="价格"></el-input>
                  </div>
                  <div v-if="scope.$index != editedRow">
                  {{scope.row.price / 100}}
                  </div>
                  </template>
                </el-table-column>
                <el-table-column 
                  label="状态"
                  width="200">
                  <template slot-scope="scope">
                  <div v-if="scope.$index == editedRow">
                  <el-select v-model="status" placeholder="状态">
                    <el-option label="有效" value="ENABLE"></el-option>
                    <el-option label="失效" value="CANCELED"></el-option>
                  </el-select>
                  </div>
                  <div v-if="scope.$index != editedRow">
                    {{scope.row.status === "ENABLE" ? "有效" : "失效"}}
                  </div>
                  </template>
                </el-table-column>
                <el-table-column label="编辑" width="180">
                    <template slot-scope="scope">
                      <el-button size="small" type="primary" @click="handleEdit(scope.$index)" v-show="scope.$index != editedRow">编辑</el-button>
                      <el-button size="small" type="primary" @click="handleEditOk(scope.$index)" v-show="scope.$index == editedRow">确定</el-button>
                      <el-button size="small" type="primary" @click="handleEditCancel(scope.$index)" v-show="scope.$index == editedRow">取消</el-button>  
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-main>
  </el-container>
</template>

<script>
    import {getPriceList, getGiftList, createGiftPrice, updateGiftPrice} from '@/api/gift'
    import {getAllLevel} from '@/api/level'
    import {getExpressList} from '@/api/info'
    import { mapState } from 'vuex'

    export default {
      data () {
        return {
          priceCreateForm: {
            giftId: '',
            kkTypeId: '',
            levelId: '',
            price: 0,
            status: 'ENABLE'
          },
          gifts: [],
          expresses: [],
          priceList: [],
          levels: [],
          editedRow: -1,
          price: 0,
          status: '',
          tableLoading: false
        }
      },
      computed: {
        ...mapState('manage', ['allSites'])
      },
      mounted () {
        // this.initData();
        // this.refreshGiftList()
        this.refreshExpressList()
        this.refreshLevelList()
        this.refreshPriceList()
      },
      methods: {
        async refreshLevelList () {
          try {
            const result = await getAllLevel(true)
            if (result.status === 200 && result.data.code === 200) {
              this.levels = result.data.data
            } else {
              throw new Error('获取等级失败')
            }
          } catch (err) {
            // this.$message.error('列表获取失败')
            console.log('获取等级失败', err)
          }
        },
        async onSubmit () {
          const loading = this.$loading({
            lock: true,
            text: '正在加载',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          try {
            let priceForm = Object.assign({}, this.priceCreateForm)
            priceForm.price = (priceForm.price * 100).toFixed(0)
            let result = await createGiftPrice(priceForm)
            if (result.status === 200 && result.data.code === 200) {
              this.refreshPriceList()
            } else {
              throw new Error('创建失败')
            }
          } catch (err) {
            // this.$message.error('价格创建失败')
            console.log(err)
          }
          loading.close()
        },

        async refreshGiftList () {
          this.tableLoading = true
          try {
            const result = await getGiftList(true)
            if (result.status === 200 && result.data.code === 200) {
              this.gifts = result.data.data
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('列表获取失败')
            console.log('获取数据失败', err)
          }
          this.tableLoading = false
        },
    
        async refreshExpressList () {
          this.tableLoading = true
          try {
            
            const resultExpress = await getExpressList(false)
            if (resultExpress.status === 200 && resultExpress.data.code === 200) {
              this.expresses = resultExpress.data.data
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('列表获取失败')
            console.log('获取数据失败', err)
          }
          this.tableLoading = false
        },
        async refreshPriceList () {
          this.editedRow = -1
          this.tableLoading = true
          try {
            const result = await getGiftList(true)
            if (result.status === 200 && result.data.code === 200) {
              this.gifts = result.data.data
            } else {
              throw new Error('获取数据失败')
            }
            const resultPrice = await getPriceList(true)
            if (resultPrice.status === 200 && resultPrice.data.code === 200) {
              this.priceList = resultPrice.data.data
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('列表获取失败')
            console.log('获取数据失败', err)
          }
          this.tableLoading = false
        },
        async changeGiftStatus (index) {
          try {
            let gift = this.giftList[index]
            let status = gift.status !== 'ENABLE' ? 'ENABLE' : 'CANCELED'

            const result = await updateGiftPrice(gift.id, status)
            if (result.status === 200 && result.data.code === 200) {
              this.refreshPriceList()
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('更新失败')
            console.log('获取数据失败', err)
          }
        },
        handleEdit (row) {
          this.editedRow = row
          let priceRow = this.priceList[row]
          this.price = priceRow.price / 100
          this.status = priceRow.status
        },

        async handleEditOk (row) {
          try {
            const result = await updateGiftPrice(this.priceList[row].id, (this.price * 100).toFixed(0), this.status)
            if (result.status === 200 && result.data.code === 200) {
              this.priceList[row].price = (this.price * 100).toFixed(0)
              this.priceList[row].status = this.status
              this.editedRow = -1
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('更新失败')
            console.log('获取数据失败', err)
          }
        },

        handleEditCancel (row) {
          this.editedRow = -1
        },
        giftName(id) {
          for (let index in this.gifts) {
            if (this.gifts[index].id === id) {
              return this.gifts[index].resourceDesc
            }
          }
          return ""
        }
      }
    }
</script>

 <style lang="less" scoped>
    @import '../../style/mixin';
    .main {
        margin: 0 30px;
    }

    .table-wrapper {
        border: 1px solid #ebeef5;
        margin: 30px 0;
        padding-top: 20px;
        padding-left: 10px;
    }

    .table-row {
        border-bottom-width: 1px;
        border-bottom-color: #ebeef5;
        border-bottom-style: solid;
    }

    .table-cell {
        margin: 10px 20px;
        // min-height: 48px;
        // border-right-width: 1px;
        // border-right-color: #ebeef5;
        // border-right-style: solid;
    }

    .table-header {
        min-height: 48px;
        border-bottom-width: 1px;
        border-bottom-color: #ebeef5;
        border-bottom-style: solid;
        background: #f6f6f6;
    }
    .table-header-title {
        margin-left: 10px;
    }

</style>
